<template>
  <div class="click_main_container" v-show="isShowClickPopup">
    <div class="tabs_container" >
      <div
        class="tab_item_btn"
        :class="{ active: btn.active }"
        v-for="(btn, index) in tabNameList"
        :key="index"
        @click="tabItemClick(btn, index)"
      >
        <img
          :src="btn.active ? btn.image_active : btn.image"
          alt=""
          :class="btn.active ? 'tab_item_btn_active' : 'tab_item_btn_unactive'"
        />
        <p>{{ btn.name }}</p>
      </div>
    </div>
   
    <div class="click_main_content">
      <div class="click_main_title">
        <span>{{ titleText }}</span>
      </div>
      <!-- <div class="click-close" @click="handleClose"></div> -->
      <div class="click-content">
        <GuanXianFuGaiQY
          v-show="componentName == 'GuanXianFuGaiQY'"
          ref="GuanXianFuGaiQY"
          :GuanXianData="GuanXianDatas"
        />
        <!-- <GuanXianYingXiang v-show="componentName == 'GuanXianYingXiang'"  :GuanXianData="GuanXianDatas"/> -->
        <GuanxianInfo
          v-show="componentName == 'GuanxianInfo'"
          :GuanXianData="GuanXianDatas"
        />
        <!-- <GuanxianXinxi
          v-show="componentName == 'GuanxianXinxi'"
          :GuanXianData="GuanXianDatas"
          @guanxianxinxidata="guanxianChildren"
        ></GuanxianXinxi> -->
      </div>
    </div>
  </div>
</template>

<script>
import GuanXianFuGaiQY from "./GuanXianFuGaiQY.vue";
import GuanxianInfo from "./GuanxianInfo.vue";
import GuanxianXinxi from "./GuanxianXinxi.vue";
// import GuanXianYingXiang from './GuanXianYingXiang.vue';
import { getGuanXianHoverData } from "@/api/apiPOI";

export default {
  name: "GXPopup",
  components: {
    GuanxianInfo,
    GuanXianFuGaiQY,
    GuanxianXinxi,
    // GuanXianYingXiang
  },
  props: {
    paramsData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  watch: {
    paramsData: {
      handler(newVal, oldVal) {
        if (newVal && newVal.hasOwnProperty("UserID")) {
          this.getGuanXianDataInfo(newVal.UserID);
          this.chanCode = newVal.UserID;
          this.setActiveTabs(0);
          this.componentName = "GuanxianInfo";
        }
      },
      immediate: true,
    },
  },
  mounted() {
    // this.getGuanXianDataInfo();
  },
  data() {
    return {
     
      titleText: "click输水西干一级供水北干管",
      isShowClickPopup: true,
      tabNameList: [
        {
          name: "管线详情",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: true,
          component: "GuanxianInfo",
        },
        {
          name: "覆盖区详情",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "GuanXianFuGaiQY",
        },
        // {
        //   name: "管线信息",
        //   image: require("@/assets/rightMenu/selectInfo/button_info.png"),
        //   image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
        //   active: false,
        //   component: "GuanxianXinxi",
        // },
        //   {
        //     name: "影响详情",
        //     image: require("@/assets/rightMenu/selectInfo/button_info.png"),
        //     image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
        //     active: false,
        //     component: 'GuanXianYingXiang'
        //   },
      ],
    
      isShowHoverPopup: false,
      componentName: "GuanxianInfo",
      GuanXianDatas: {},
      GuanXianLists: {},
      chanCode: "",
    };
  },

  methods: {
    tabItemClick(btn, index) {
      this.tabNameList.map((item) => {
        item.active = false;
      });
      btn.active = true;
      this.componentName = btn.component;

      btn.component == "GuanXianFuGaiQY" &&
        this.$refs.GuanXianFuGaiQY.loadYingXiangQYData(this.chanCode);
    },

    handleClose() {
      // this.isShowClickPopup = false;
      this.$parent.setIsShow(false);
    },
    guanxianChildren(val) {
      console.log(val);
      if(val){
        this.tabNameList= [
        {
          name: "管线详情",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: true,
          component: "GuanxianInfo",
        },
        {
          name: "覆盖区详情",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "GuanXianFuGaiQY",
        },
        {
          name: "管线信息",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "GuanxianXinxi",
        }
     
      ]
      }else{
        this.tabNameList= [
        {
          name: "管线详情",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: true,
          component: "GuanxianInfo",
        },
        {
          name: "覆盖区详情",
          image: require("@/assets/rightMenu/selectInfo/button_info.png"),
          image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
          active: false,
          component: "GuanXianFuGaiQY",
        },
      
      ]
      }

    },
    getGuanXianDataInfo(code) {
      let params = {
        chanCode: code || "ssxgyjgsbgsfg-984",
      };
      getGuanXianHoverData(params).then((res) => {
        let paramType = (value, type) =>
          Object.prototype.toString.call(value).includes(type);
        // debugger
        if (paramType(res, "Object")) {
          if (!res.data) {
            return;
          }
          this.GuanXianDatas = res.data;
          this.titleText = res.data.chanName;
          //  console.log("++++++++++++++",res)
        }
      });
    },
    /**
     * 初始化tab页状态
     * @param {*} index 需要active的tabitem
     */
    setActiveTabs(index) {
      this.tabNameList.forEach((element, i) => {
        if (index == i) {
          element.active = true;
        } else {
          element.active = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.click_main_container {
}

.tabs_container {
  display: flex;
}
.tab_item_btn {
  width: 110px;
  height: 30px;
  position: relative;
  left: 1px;
  color: rgba(255, 255, 255, 0.5);
  top: 3px;
  cursor: pointer;
}

.tab_item_btn.active {
  color: #fff;
  z-index: 999;
}

.tab_item_btn_active {
  width: 126%;
  height: 100%;
  z-index: 999;
}
.tab_item_btn_unactive {
  width: 126%;
  height: 100%;
  z-index: 998;
}

.tab_item_btn p {
  font-family: SourceHanSansCN-Regular;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translate(10%, -50%);
}

.click_main_content {
  width: 540px;
  height: 243px;
  background: url("@/assets/poipopup/poi-popup-bg-583-243.png");
  background-size: 100% 100%;
}

.click_main_title {
  height: 42px;
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  background-size: 100% 100%;
  text-align: left;
  padding-left: 20px;
  background-color: rgba(233, 111, 23, 0);
  background: url("@/assets/poipopup/title-bg.png") no-repeat;
  position: relative;
  top: 42px;
}

.click_main_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 42px;
  letter-spacing: 0px;
  color: #ffffff;
  background-image: linear-gradient(
    to bottom,
    #fff 30%,
    #00baff
  ); /*  背景线性渐变 */
  background-clip: text;
  -webkit-background-clip: text; /* 背景被裁减为文字的前景色 */
  -webkit-text-fill-color: transparent; /* 文字填充为透明，优先级比color高。  */
  position: relative;
  top: -38px;
}

.click-close {
  width: 14px;
  height: 15px;
  background: url("@/assets/poipopup/poi_popup_close.png");
  position: relative;
  top: -24px;
  left: 658px;
  cursor: pointer;
}

.click-content {
  padding: 20px 20px 20px 20px;
  // background-color: red;
}
</style>
